<script setup lang="ts">
// import QQSvg from '@/assets/svgs/qq.svg'

import { ref } from "vue";

const tagList = ref([
  {color: 'rgb(105, 160, 52)', label: 'http'},
  {color: '#9f0c0c', label: '计算机网络'},
  {color: '#9f8b0c', label: '趣事'},
  {color: '#9f3f0c', label: 'vue'},
  {color: '#119f0c', label: 'react'},
  {color: '#e73232', label: '动漫'},
  {color: '#0c739f', label: 'nodejs'},
  {color: '#530c9f', label: 'html'},
  {color: '#7f0c9f', label: '漫画'},
  {color: '#caf91f', label: 'css'},
  {color: '#9f0c5a', label: '前端'},
  {color: '#0c739f', label: '游戏'},
  {color: '#a5d2fc', label: '生活'},
  {color: '#731748', label: 'git'},
  {color: '#bebebe', label: '经验'},
  {color: '#d7e138', label: 'pinia'},
  {color: '#11e858', label: 'python'},
])
</script>

<template>
  <div class="home-right">
    <!--    <div style="height: 500px">33</div>-->
    <div class="fs-avatar-card">
      <div class="fs-avatar-card_cover">
        <img class="img" src="http://pic.fasyncsy.com.cn/coverPic/cover.jpg">
      </div>
      <div class="fs-avatar-card_avatar">
        <img class="img" src="@/assets/images/heads/headImg.jpeg" alt="">
      </div>
      <div class="fs-avatar-card_info">
        <div class="info-icon" title="qq">
          <img class="img" src="@/assets/svgs/qq.svg" alt="">
          <div class="hover-img"><img class="img" src="@/assets/images/qqAdd.jpg" alt=""></div>

        </div>
        <div class="info-icon" title="微信">
          <img class="img" src="@/assets/svgs/weixin.svg" alt="">
          <div class="hover-img"><img class="img" src="@/assets/images/wxAdd.jpg" alt=""></div>
        </div>
        <div class="info-icon" title="抖音">
          <img class="img" src="@/assets/svgs/douyin.svg" alt="">
          <div class="hover-img"><img class="img" src="@/assets/images/douyin.jpg" alt=""></div>
        </div>
        <a class="info-icon" href="hhttps://gitee.com/?channel_utm_content=%E8%BF%9B%E5%85%A5%E5%AE%98%E7%BD%91&channel_utm_medium=sem&channel_link_type=web&channel_utm_source=%E7%99%BE%E5%BA%A6&sat_cf=2&channel_utm_campaign=%E5%93%81%E4%B8%93&channel_utm_term=%E4%B8%BB%E6%8C%89%E9%92%AE1&_channel_track_key=see7zmAJ&link_version=1&wl_src=baidu" target="_blank" title="gitee">
          <img class="img" src="@/assets/svgs/gitee.svg" alt="">
        </a>
      </div>
    </div>
    <div class="side-card side-card__sticky">
      <div class="fs-side-card">
        <div class="fs-side-card_titleBox">
          <div class="title">标签</div>
        </div>
        <div class="fs-side-card_content">
          <div class="el-scrollbar">
            <div class="el-scrollbar__wrap el-scrollbar__wrap--hidden-default" style="max-height: 300px;">
              <div class="el-scrollbar__view" style="">
                <ul class="ul">
                  <li class="tag-item" v-for="item in tagList" :key="item.label">
                    <span class="tag-item_color" :style="{'background-color': item.color}"></span>
                    <span class="tag-item_content">{{ item.label }}</span>
                  </li>
                </ul>
              </div>
            </div>
            <div class="el-scrollbar__bar is-horizontal" style="display: none;">
              <div class="el-scrollbar__thumb" style="transform: translateX(0%);"></div>
            </div>
            <div class="el-scrollbar__bar is-vertical" style="display: none;">
              <div class="el-scrollbar__thumb" style="transform: translateY(46.4865%); height: 200.494px;"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.home-right {
  margin-top: 2%;
  top: -50px;
  width: 250px;
  position: sticky;
  margin-right: 50px;
  display: inline-block;
  height: fit-content;

  .fs-avatar-card {
    position: relative;
    width: 100%;
    height: 170px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 1px 0 6px #0000000a;

    .fs-avatar-card_cover {
      width: 100%;
      height: 50%;
      overflow: hidden;

      .img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .fs-avatar-card_avatar {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 70px;
      height: 70px;
      border-radius: 50%;
      box-shadow: 0 0 15px #0000004d;

      .img {
        width: 100%;
        height: 100%;
      }
    }

    .fs-avatar-card_info {
      display: flex;
      justify-content: space-around;
      font-size: 20px;
      height: 30px;
      margin-top: 40px;
      cursor: pointer;

      .info-icon {
        height: 100%;
        position: relative;

        .hover-img {
          width: 150px;
          height: 0;
          position: absolute;
          left: -20px;
          transition: top .3s, color .3s;
          bottom: -200px;
          overflow: hidden;

          & > .img {
            width: 100%;
          }
        }

        & > .img {
          height: 100%;
        }

      }

      .info-icon:hover .hover-img {
        height: auto;
        bottom: 30px;
        z-index: 999;
      }
    }
  }

  .fs-side-card {
    width: 100%;
    margin-top: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 1px 0 6px #0000000a;
    padding: 10px;

    .fs-side-card_titleBox {
      position: relative;
      width: 100%;
      height: 40px;
      border-bottom: 1px solid #e9f0fc;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        font-weight: bolder;
        font-size: 20px;
        line-height: 40px;
        color: #777;
      }
    }

    .fs-side-card_content {
      height: 100%;
      margin-top: 10px;

      .el-scrollbar {
        overflow: hidden;
        position: relative;
        height: 100%;

        .ul {
          padding: 0;
          margin: 0;
          height: 100%;
          list-style: none;

          .tag-item {
            border: 1px solid #eee;
            float: left;
            display: flex;
            align-items: center;
            margin: 5px;

            .tag-item_color {
              margin-left: 5px;
              width: 12px;
              height: 12px;
              border-radius: 50%;
            }

            .tag-item_content {
              font-size: 14px;
              height: 20px;
              line-height: 20px;
              padding: 0 10px;
              color: #717171;
            }
          }
        }
      }
    }
  }
}
</style>